<template>
  <div class="home">
    <van-swipe class="my-swipe" indicator-color="white">
      <!--      店铺分类-->
      <van-swipe-item v-for="count in Math.ceil(cutClassList.length)" :key="count">
        <van-grid>
          <div class="classesItem" @click="goOrder"
               v-for="item in cutClassList[count-1]" :key="item.id">
            <img v-lazy="'https://fuss10.elemecdn.com'+item.image_url" alt="">
            <p>{{item.title}}</p>
          </div>
        </van-grid>
      </van-swipe-item>
    </van-swipe>

    <!--    商店列表-->
    <ShopList></ShopList>
  </div>
</template>

<script>
import ShopList from '../../components/ShopList'

export default {
  name: 'index',
  data: () => ({
    limit: 8, // 每页分类的数量
    cutClassList: [] // 切割后的分类
  }),
  created () {
    this.getFoodClasses()
  },
  methods: {
    async getFoodClasses () {
      const { data } = await this.$http.getFoodClasses()
      for (let i = 0; i < Math.ceil(data.length / this.limit); i++) {
        this.cutClassList.push(data.slice(i * this.limit, i * this.limit + this.limit))
      }
    },
    goOrder () {
      this.$router.push({ path: '/home/shopOrder' })
    }
  },
  components: {
    ShopList
  }
}
</script>

<style lang="scss" scoped>
  .home {
    padding-bottom: 70px;

    .my-swipe .van-swipe-item {
      padding: 20px 0 30px 0;
      color: #007aff;
      text-align: center;
      background-color: #ffffff;

      [class*=van-hairline]::after {
        border: none;
      }

      .van-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center;

        .classesItem {
          margin: 8px 30px;
          text-align: center;

          img {
            display: block;
            width: 70px;
            height: 70px;
          }

          p {
            font-size: 20px;
            color: #666666;
          }
        }
      }
    }

    /deep/ .van-swipe__indicator {
      width: 8px;
      height: 8px;
      background-color: #666666;
    }

    /deep/ .van-swipe__indicator--active {
      background: #007aff !important;
    }

    /deep/ .van-swipe__indicators {
      top: 90%;
    }

    /deep/ .van-swipe__indicator:not(:last-child) {
      margin-right: 12px;
    }

    .shopList {
      padding: 0;

      /deep/ .van-dropdown-menu {
        display: none;
      }
    }
  }
</style>
